​生成式AI颠覆前端，你该何去何从？

注，本文仅供大家学习。转载请按照相关规则，注明来源，且附上本文的所有参考文献链接。

作者 |  Hans Reinl

翻译&分析 | 阿法兔

目录&亮点

*本文4600字左右，也可以收藏慢慢看

1. 人工智能的S曲线

a. 人工智能发展的三个阶段

2. 设计→实现→用户

a. 构建设计系统

ⅰ. 设立主题

ⅱ. 组件

b. 设计稿即代码（原型即代码）

c. 网页生成

3. 工程师在人工智能中的角色：如何协作？

亮点：随着自动化程度的提高，工程师的工作将更偏向战略，角色将会从理解前端框架，逐步转向理解机器学习工具。从本质上来讲，工程师将作为AI工具与最终产品之间的关键桥梁，人工智能可以给工程师赋能，同时也会发挥工程师本身作为领域专家专业知识和判断力，以确保最佳结果。

人工智能的S曲线

近年来，编程领域一直在飞速发展，而将人工智能融入开发过程中，也是最为激动人心的进步之一。像ChatGPT这样的AI工具横空出世，使得编程工作比过去很多时候都更加容易。这种境况，对前端开发的未来会产生重大影响。因此，探讨人工智能是如何影响编程与前端，是一个重要的课题。

在这篇文章，笔者分享了对未来几年的潜在发展方向的看法：

随着大家逐步在程序编写中应用人工智能工具，产生了很多需要考虑的新问题：

例如，这种境况，将如何影响人类的工作方式？是否会改变前端开发的性质？对企业、开发者和终端用户有什么影响？通过AI，前端开发工程师的工作会发生什么变化？

以上这些，都是我们在深入研究人工智能的前端开发的未来时将探讨的一些关键问题。

人工智能的S曲线

汤姆·斯科特对AI在未来几年的潜在影响，提出了自己的看法。

他是这么说的：我们可能正处于人工智能的S曲线的起点，一些行业可能被颠覆，类似于21世纪初Napster颠覆音乐行业，CD被淘汰，并为我们今天所知的音乐流媒体开辟了道路。

人工智能的颠覆性可能会彻底改变我们的工作、生活和与技术互动的方式。甚至使计算机工程的一部分被淘汰。

随着人工智能工具更加普及，可以见证计算机工程实践出现更高水平的自动化：这里的自动化，将包括自动化任务：如页面创建，组件开发等等。然而需要注意的是，在工程领域工作的每个角色也需要担任充当这些工具输出的检查者。

工程师需要发挥这些工具的潜力，并进行应用。

随着自动化程度的提高，工程师的工作将更偏向战略，更加强调解决问题和决策。因此，程序员需要开发新的技能，有效地与AI工具合作，并将这些工具纳入自己的工作流程，创造更好、更快的价值。

尽管这种巨大的范式变化可能看起来容易让人感到怕怕的，但与AI工具一起工作也具备着巨大的好处，并且很可能导致前端开发领域的重大进步。

人工智能发展的三个阶段：

人工智能本身就被用作众多工具和工作方法的术语。一般来说，人工智能大致分为三个阶段。

弱人工智能（ANI：Artificial Narrow Intelligence）

智能的下棋程序、能Siri、Alexa，弱人工智能已经完全可以实现

通用人工智能（AGI：Artificial General Intelligence）

AI的表现可以与人类相媲美：可以流畅地对话，煮咖啡，被人类雇主雇佣，并且完成度很好，目前我们还没有达到真正的通用人工智能，科学家认为，人类还需要几十年的时间才能完全解锁通用人工智能，也许在2070年会解锁AGI

超人工智能（ASI：Artificial Super Intelligence）

想想科幻小说中的描述：超人工智能可以向自己学习，并且比人类更聪明，对超人工智能的想象，还在遥远的未来。

在我们对AI工具的工作框架中，对不同的AI工具能够完成的工作层级进行了构想：

优化输入（Recontextualize：重建上下文）

这一层需要根据模型和要求的提示，来优化输入，以满足环境需求。

例如，假如用户提供了一个长文本，AI工具可以用来总结它并提取关键信息，还有个例子是，将某段文本翻译成另一种语言，或将一个Achievements List转换为文本，这层工作，对于那些自动化重复性和耗时的任务非常有用处，这样一来，工程师就能够专注于更复杂的挑战。

信息列举（研究）

这层工作，涉及到列举模型所训练过的信息，并将这些信息放入特定的背景环境中。一个典型例子是，是把一个historic event摘录出来，并与另一个event进行比较。如果更详细地用工程术语解释：在这层中，AI工具可以从自己所学到的东西中，找到类似的案例，并将它们放入上下文的背景中。例如，AI工具可以寻找过去测试过的类似案例，协助工程师根据给定的输入编写单元测试。还有个例子，通过搜索AI模型学习过的信息，得到用于解析电子邮件地址正则表达式。

汇集数据（合成）

这一层，会将多个数据点汇集在一起，形成新的产出。例如，可以根据不同图像流派的风格，去生成一首音乐歌曲。解释一下就是：我们目前知道如何分析图像的流派，也知道如何生成一首歌曲，不过把这两者汇集起来，却没那么容易。

这层工作对于产生创造性产出，非常重要。具体来说，AI可以通过给出新的想法和想法的组合来强化人类的创造力。然而，这一层也是最具挑战性的，因为它需要对不同的数据类型以及如何有效结合，进行深刻理解。

现在让我们看看如何在前端开发中实现上述三层实践：

设计➡实施➡用户

今天几乎所有的网站或应用程序的基础，都以设计系统为基础，设计系统描述了主题和可以复用的组件。我们先关注一下如何应用AI进行构建设计系统。

什么是设计系统（Design System)？设计系统的定义是一系列文档元素、组件和区域、设计和前端指南的等完整的标准。有了设计系统，公司内各部门可以轻松地在应用程序的多个实例中重复使用样式和组件，快速构建一个或多个产品，从而简化大规模设计。

比如说，可以给你一套定制的主题，各种组件，设计语言和研发框架等等。

参考资料：https://zhuanlan.zhihu.com/p/413578904

从新的设计系统开始，通过检查现有设计系统和构造，可以获得优化设计系统的建议。

应用AI工具，通过The synthesis layer生成设计系统，将多个数据点汇集在一起，生成增强版本。

比如说，将各种设计元素数据输入工具：如配色方案、排版和组件交互，以及目前设计系统的例子。然后，AI工具可以使用这些输入来生成新的、更有凝聚力的设计系统，并遵守原系统的具体要求。

AI工具可以用来根据提示语，对输入进行上下文识别，比如根据不同Context生成某个按钮的变体，并确保输出符合它所使用的具体上下文场景。

因此，AI工具可以赋能整个设计系统，参与设计系统元素的创造，但是未来还有很多宝藏可以挖掘。

构建设计系统

建立主题

构建设计系统并不复杂，如果我们去问ChatGPT，给它提一个需求，该如何生成一个设计系统？比如说，如何为一个跑鞋的网站建立一个设计系统，并提供调色板和排版，ChatGPT的回复还是很有用处的。

组件

以上面的输出作为设计系统的基础，再添加设计来创建最开始的组件，或者通过类似Midjourney的工具来生成组件，

虽然可以用GPT生成按钮组件，但这属于一个经验问题，也就是通过输入正确命令得到正确的数据输入。

想象一个场景：第一步，再现有设计系统上训练模型，结合Design Systems Repo或类似应用。

然后根据ChatGPT给出的样式，构建初始组件（例如一个按钮）直到它能够达到工程师想要的水平。现在，可以用给出的按钮样式，作为下一个要求的输入，比如说一个卡片组件，之后，生成任何组件都会符合我们想要的设计风格。也就是说，AI人工智能帮助工程师完成了繁重工作。

目前市面上有工具可以将从模拟图中生成设计和组件的过程自动化，底层也是应用了AI技术。

设计稿即代码

为了进一步简化前端开发过程，工程师也可以使用其他的工具，比如说有工具可以从给定的设计中，直接进行代码生成，从草图和代码中创建网站，从而不需要工程师手动编写一行行代码。

代码生成之后，工程师就可以专注于组件化分离式编程，确保完成了性能优化，满足项目的具体需求。通过AI自动生成代码的过程，工程师可以节省时间，专注于解决更复杂的问题，给出更高效和更有效的项目交付。

这里有个例子：比如说，可以一次为多个平台生成代码，有工具能够提供作为Swift UI组件的输出，以及为React或另一个网络库的输出。

网页生成

在网页上，如果想显示匹配的数据，新的page-types会根据数据自动生成，我今天推荐引擎所做的完全自动生成的个性化体验就是这个原理。基于这块进行展望，人AI可以根据工程师给出的输入数据，比如说用户分析和企业KPI，生成各种动态页面。

工程师与AI的角色：如何协作？

1. 协作：工程师需要与人工智能合作

2. 判断：工程师控制人工智能的输出

3. 批判性思维：工程师需要专注于更高级的任务

4. 定制解决方案：整合人工智能

5. 道德责任：工程师需要确保人工智能的应用符合道德规范

这里我们来更深入地解释一下这个问题：当AI更广泛地融入前端开发后，工程师的角色将转向对协作和战略的关注，程序员们将会需要更熟练地与人工智能合作，精心设计正确的提示语（Prompt），以产生符合预期的输出结果。

需要注意的是，机器产生的输出和它学习了什么样的数据有关。所以，工程师在控制工具输出方面也会发挥至关重要的作用，确保生成的输出符合环境，实现预期的结果。

此外，作为工程师，我们的角色将会从了解具体的前端框架，逐步转向了解具体的机器学习工具。

举个例子，如果想要设计系统生成的组件。工程师就需要评估AI工具需要生成的按钮，在特定环境下会有什么变体，除此之外，还需要评估生成的变体在使用环境的上下文中，是否具备效用，并确保按钮所触发的与动作之间的映射是正确的。（They will also need to assess whether the generated variants are useful in the context they are used in, and ensure that the actions triggered by the buttons are properly mapped to the interactions with them.）

从本质上来讲，工程师将作为AI工具与最终产品之间的关键桥梁，人工智能可以给工程师赋能，同时也会发挥工程师本身作为领域专家专业知识和判断力，以确保最佳结果。

除了与AI工具合作,控制它们产生的输出，未来工程师可能会花更多时间专注于需要批判性思维和决策的更高层次的任务。随着更平凡和重复的任务被自动化，工程师将有机会专注于更复杂的挑战，并利用他们的技能和专业知识来解决更重要的问题。这将导致UE设计师和前端工程师的角色将逐步靠拢。

比如说：复杂系统设计，评估和选择最合适的工具和技术，以及进行性能优化、可扩展性。工程师还需要了解如何将AI整合到这些系统中，评估不同的人工智能工具和技术的潜在影响和好处，并开发定制解决方案以满足特定需求。

此外，工程师将在确保人工智能工具的使用符合道德和责任方面发挥重要作用，需要确保人工智能工具的使用方式符合道德标准和最佳实践。

总的来说，未来的工程师将需要对技术有高适应度，并且需要能够与AI工具协作，结合自己作为领域专家的独到知识和观点。这样一来，工程师将有助于推动创新，提高生产力，并构建更有效和高效的前端开发工作流程。

总体来说，将AI与前端开发结合，有以下几点好处：

1.提高生产力和效率。把重复任务自动化，工程师专注解决更为重要问题，成功提升效率。

2.协助降低前端开发中出现的错误，通过自动生成代码和组件等任务，AI工具可以减少人为错误，确保入门开发工作质量。

3.推动创新和改善用户体验，开发出更加智能、反应迅速和个性化的用户界面，更满足用户的需求和偏好。

随着AI技术的进步，越来越多的前端工程很可能会被自动化。这会导致前端开发者所需的技能组合发生转变，因此那些紧跟最新技术趋势，努力升级技能的开发者将在该行业中获胜。

我们会看到系列新创新的出现，而这些创新将继续塑造这个行业。

重要的是，前端开发中的人类，永远不会被机器彻底取代。虽然AI能够让许多任务自动化，但它无法复制来自人类设计师和开发者的创造力和独创性。因此，对于开发者来说，在接受新技术的同时，也要坚持自己独特的创意灵感。

参考资料

1.https://zhuanlan.zhihu.com/p/413578904

2.Revolutionizing Frontend Development: The Role of AI in Design Systems | Blog | Hans Reinl (drublic.de)

3.Ant Design 

【阅读更多】